<template>
	<view class="configFontsize">
    <div class="topMessage">
      <div class="messageContent">
        <div class="userPhoto">
          <image :src="src" :lazy-load="true" />
        </div>
        <div class="userLogin">
          <text>登录</text>/<text>注册</text>
        </div>
      </div>
    </div>
    <div class="moneyFun">
      <div class="moneyContent">
        <div class="topFun">
          <div class="funs-Top">
            <div>预付款</div>
            <div class="botBox">0.00</div>
          </div>
          <div class="funs-Top">
            <div>优惠券</div>
            <div class="botBox">0</div>
          </div>
          <div class="funs-Top">
            <div>足迹</div>
            <div class="botBox">0</div>
          </div>
        </div>
        <div class="bomFun">
          <div class="funs-bom" v-for="(item,index) in payList" :key="index" @click="payForFun(index)">
            <div>
              <div class="iconImg">
                <image :src="item.img" :lazy-load="true"/>
              </div>
              <div class="botBox">{{item.name}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="centerFuns">
      <div class="innerCont">
        <div class="myFunc" v-for="(item,index) in contentList" :key="index" @click="contentClick(index)">
          <div class="outsideFunc">
            <div class="imgBox">
              <image :lazy-load="true" :src="item.img" />
            </div>
            <div class="botBox">
              {{item.name}}
            </div>
          </div>
        </div>
      </div>
    </div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
        payList: [
          {
            name:'待付款',
            img: require('@/static/mineImg/waitFK.png')
          },
          {
            name:'待发货',
            img: require('@/static/mineImg/waitFH.png')
          },
          {
            name:'待收货',
            img: require('@/static/mineImg/waitSH.png')
          },
          {
            name:'待评价',
            img: require('@/static/mineImg/waitPJ.png')
          },
          {
            name:'退款/售后',
            img: require('@/static/mineImg/afterSafe.png')
          },
        ],
        contentList: [
          {
            name: '我的地址',
            img: require('@/static/mineImg/address.png')
          },
          {
            name: '我的收藏',
            img: require('@/static/mineImg/collect.png')
          },
          {
            name: '我的足迹',
            img: require('@/static/mineImg/history.png')
          },
        ]
			}
		},
		methods: {
			contentClick(val){
        if (val === 0) {
          uni.navigateTo({
            url: '/pagesSon/address/address'
          });
        } 
        // else if(val === 1) {

        // } else if(val === 2) {
          
        // }
      },
      payForFun(val){
        console.log(val);
      }
		}
	}
</script>

<style scoped lang="scss">
  @import "@/common/configStyle.scss";
  .configFontsize {
    font-size: $ruyi-config-fontsize;
    background-color: $ruyi-config-backColor;
    min-height: 100vh;
  }
  .topMessage {
    width: 100%;
    height: 334rpx;
    background-image: url(@/static/main-bg.png);
    background-size: 100% 100%;
    border-bottom-left-radius: $ruyi-config-borderRaduio;
    border-bottom-right-radius: $ruyi-config-borderRaduio;
    position: relative;
    .messageContent {
      width: $ruyi-config-outSideWidth;
      height: 150rpx;
      position: absolute;
      top: 90rpx;
      left: $ruyi-config-outSidePadding;
      color: #fff;
      display: flex;
      .userPhoto {
        height: 150rpx;
        line-height: 150rpx;
        width: 150rpx;
        border-radius: 50%;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .userLogin {
        margin-left: 30rpx;
        height: 150rpx;
        line-height: 150rpx;
      }
    }
  }
  .moneyFun {
    width: $ruyi-config-outSideWidth;
    padding: 0 $ruyi-config-outSidePadding;
    position: relative;
    top: -30rpx;
    .moneyContent {
      width: 100%;
      background-color: #fff;
      padding: 40rpx 0;
      border-radius: 10px;
      .topFun {
        width: 100%;
        display: flex;
        justify-content: space-around;
        .funs-Top {
          width: 25%;
          text-align: center;
          .botBox {
            margin-top: 10rpx;
          }
        }
      }
      .bomFun {
        margin-top: 50rpx;
        min-height: 100rpx;
        width: 100%;
        display: flex;
        justify-content: space-between;
        .funs-bom {
          width: 20%;
          display: flex;
          justify-content: center;
          .iconImg {
            width: 100%;
            height: 58rpx;
            position: relative;
            image {
              position: absolute;
              left: 50%;
              transform: translateX(-29rpx);
              width: 58rpx;
              height: 58rpx;
            }
          }
        }
        .botBox {
          margin-top: 10rpx;
        }
      }
    }
  }
  .centerFuns {
    width: $ruyi-config-outSideWidth;
    padding: 0 $ruyi-config-outSidePadding;
    .innerCont {
      background-color: #fff;
      width: 100%;
      display: flex;
      padding-bottom: 28rpx;
      flex-wrap: wrap;
      border-radius: 10px;
      .myFunc {
        width: 25%;
        margin-top: 28rpx;
        .outsideFunc {
          width: 100%;
          text-align: center;
          .imgBox {
            width: 100%;
            display: flex;
            justify-content: center;
            image {
              display: block;
              width: 56rpx;
              height: 56rpx;
            }
          }
          .botBox {
            margin-top: 10rpx;
          }
        }
      }
    }
  }
</style>
